<template>
	<div class="account-record page">
	        <div class="con">
	            <div class="filter">
	                <!--                <div class="time">2019年10月</div>-->
	                <!--                <div class="detail"><span class="amount">支出 ¥2003.00 收入 ¥3500.00</span><span class="more">月账单 ></span></div>-->
	                <div class="detail">
						<span class="amount">
							当前{{records.length}}条记录 共支出 ¥{{totalDe}}  收入 ¥{{totalIn}}
						</span>
						<span class="more">{{accountTypeOptions[type].content}}</span>
	                </div>
	
	            </div>
	            <scroll-view  ref="scroll" style="height: 100vh;" @scrolltolower="reflash" scroll-y="true">
	                <div class="items">
	                    <div class="item" v-for="(item,index) in records" :key="index">
	                        <img :src="item.otherUser.avatar" alt="" class="avatar">
	                        <div class="right border-bottom-1px">
	                            <div class="info border-bottom-1px">
	                                <span class="remark">{{item.info}}</span>
	                                <span class="time">{{parseTime(item.time)}}</span>
	                            </div>
	                            <span class="amount" :class="{add:item.amount>0}">{{item.amount>0?'+ ':''}}{{item.amount}}</span>
	                        </div>
	                    </div>
	                </div>
	            </scroll-view>
	
	        </div>
	    </div>
</template>

<script>
	import {record,confirm} from "../../api/account";
	// import {getUserId} from "../../util/cookie";
	import {parseTime} from "../../common/js/time";
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				type:0,
				accountTypeOptions:[{content:"现金券"},{content:"积分数"},{content:"优惠券"}],
				totalIn:0,
				totalDe:0,
				page: 1,
				records: [],
				userId:null
			}
		},
		methods: {
			parseTime(time){
			  return parseTime(time)
			},
			getList() {
				record(this.type,this.page).then(res => {
					this.records = this.records.concat(this.initRecords(res.data))
					this.page  = this.page + 1
				})
			},
			reflash(){
				this.getList()
			},
			initRecords(records){
				return records.map(record => {
			
					let temp = record.record
			
			
					let userId = this.userId
					temp.user = record.toUser
					temp.otherUser = record.fromUser
					//自己是转出方
					if (record.fromUser.id == userId) {
						temp.amount = -temp.amount
						temp.user = record.fromUser
						temp.otherUser = record.toUser
					}
					let txt = '转给'
					if(temp.amount>0){
						txt = '来自'
						this.totalIn += temp.amount
					}else {
						this.totalDe -=temp.amount
					}
					txt += temp.otherUser.name
			
					if(temp.info){
						temp.info = txt+'-'+temp.info
					}else {
						temp.info = txt
					}
			
					return temp
				})
			}
			
			
		},
		onLoad(option) {
			var self = this
			if(option.type!=null){
				this.type= option.type
			}
			uni.getStorage({
				key:'userId',
				success(res) {
					console.log(res)
					self.userId = res.data
				}
			})
			console.log(this.userId)
			this.getList()
			
		}
		
		
	}
</script>

<style scoped lang="stylus">
    .account-record
        // background url("~@/assets/hbg.png") no-repeat $page-bg
        background-size 100% auto
        z-index 2
        height 100%

        .con
            /*height 100%*/
            padding 10px 10px 10px

            .filter
                background-color white
                height 65px
                display flex
                flex-direction column
                justify-content center
                padding 0 15px

                .time
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 300;
                    margin-bottom 5px
                    color: rgba(78, 61, 7, 1);

                .detail
                    font-size: 11px;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: rgba(111, 111, 111, 1)

                    .more
                        float right

            .items
                padding-bottom 10px
                margin-top 5px
                background-color white

                .item
                    display flex
                    align-items center
                    height 63px

                    .avatar
                        border-radius 50%
                        width 36px
                        height 36px
                        margin 0 10px 0 15px
                        flex 0 0 36px

                    .right
                        flex 1
                        height 100%
                        display flex
                        align-items center
                        min-width 0
                        .info
                            border-bottom-color #DCDCDC
                            height 100%
                            flex 1
                            display flex
                            justify-content center
                            flex-direction column
                            min-width 0
                            .remark
                                font-size: 13px;
                                line-height 17px
                                font-family: PingFang SC;
                                font-weight: 300;
                                color: rgba(78, 61, 7, 1);
                                margin-bottom 8px
                                text-overflow ellipsis
                                overflow hidden
                                white-space nowrap
                            .time
                                font-size: 11px;
                                font-family: PingFang SC;
                                font-weight: 300;
                                color: rgba(161, 161, 161, 1);

                        .amount
                            height 100%
                            display flex
                            align-items center
                            justify-content center
                            border-bottom-color #DCDCDC
                            flex 0 0 75px
                            font-size: 14px;
                            font-family: PingFang SC;
                            color #4E3D07
                            &.add
                                color #F7895E


</style>
